<template>
  <div ref="businessTrend" class="businessTrend"></div>
</template>

<script>
  export default {
    name: 'businessTrend',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      var that = this;
      that.getEchartData()
      setInterval(function() {
        that.getEchartData()
      }, 1000)

    },
    methods: {
      getEchartData() {
        const businessTrend = this.$refs.businessTrend;
        if (businessTrend) {
          const myChart = this.$echarts.init(businessTrend)
          var that = this;
          that.$myHttp.post("getYuanQuZouShi")
            .then(function(data) {
              if (data.status == "200") {
                // console.log(data.data.hn_company)
                var dates = [];
                var huozhi = [];
                var danliang = [];
                var shuie = [];

                data.data.hn_company.forEach((item, index) => {
                  dates.push(item.YEAR);
                  huozhi.push(item.HUOZHI);
                  danliang.push(item.DANLIANG);
                  shuie.push(item.SHUIE);
                })
                const option = {
                  title: {
                    text: '2020年航空运输月度业务量',
                    left: 'center',
                    textStyle: {
                      color: "#fff",
                      fontWeight: "normal",
                      fontSize: that.commonFunction.fontSize(0.16),
                      lineHeight: that.commonFunction.fontSize(0.2),
                    },

                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                      crossStyle: {
                        color: '#999'
                      }
                    }
                  },
                   legend: {
                    data: ['出口', '进口'],
                    orient: 'horizontal', // 'vertical'
                    x: 'right', // 'center' | 'left' | {number},
                    y: that.commonFunction.fontSize(0.2), // 'center' | 'bottom' | {number}
                    padding: that.commonFunction.fontSize(0.1), // [5, 10, 15, 20]
                    itemGap: that.commonFunction.fontSize(0.1),
                    textStyle: { //图例文字的样式
                      color: '#fff',
                      fontSize: that.commonFunction.fontSize(0.12)
                    },
                    itemWidth:that.commonFunction.fontSize(0.13),
                    itemHeight:that.commonFunction.fontSize(0.08),
                  },
                  grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '0',
                    containLabel: true
                  },
                  xAxis: [{
                    type: 'category',
                    // boundaryGap: false,
                    data: dates,
                    axisLabel: {
                      show: true,
                      //rotate:'30',
                      textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                      }
                    },
                    axisPointer: {
                      type: 'shadow'
                    },
                    axisTick:{       //y轴刻度线
                             show:true,
                             interval:0
                           },
                    splitLine: { //网格线
                      show: true,
                      lineStyle: {
                        color: ['#152f61'],

                      }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#315070' //更改坐标轴颜色
                      }
                    }
                  }],

                   yAxis: [{
                      type: 'value',
                      axisLabel: {
                        show: true,
                        textStyle: {
                          color: '#c3dbff', //更改坐标轴文字颜色
                          fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                        },
                        formatter: '{value}'
                      },
                      axisLine: {
                        lineStyle: {
                          color: '#315070' //更改坐标轴颜色
                        }
                      },
                      name: '单位：万元',
                     nameTextStyle: {
                       color: '#c3dbff',
                       lineHeight: that.commonFunction.fontSize(0.1),
                       fontSize: that.commonFunction.fontSize(0.1),
                        verticalAlign:'bottom'
                     },

                      // interval: 50,
                      splitLine: { //网格线
                        show: true,
                        lineStyle: {
                          color: ['#aaa', '#ddd'],
                          opacity: 0.3,
                          type:'dotted'
                        }
                      },
                    }
                    // {
                    //   type: 'value',
                    //   name: '单量(万包)',
                    //   nameTextStyle: {
                    //     color: "#fff",
                    //     fontSize: that.commonFunction.fontSize(0.12),
                    //   },
                    //   axisLabel: {
                    //     show: true,
                    //     textStyle: {
                    //       color: '#c3dbff', //更改坐标轴文字颜色
                    //       fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                    //     },
                    //     formatter: '{value}'
                    //   },
                    //   axisLine: {
                    //     lineStyle: {
                    //       color: '#315070' //更改坐标轴颜色
                    //     }
                    //   },
                    //   splitLine: { //网格线
                    //     show: false,
                    //     //   lineStyle: {
                    //     //     color: ['#152f61'],

                    //     //   }
                    //   },
                    // }
                  ],
                  series: [{
                      name: '出口',
                      type: 'bar',
                      barWidth: '30%',
                      itemStyle: {
                        normal: {
                          color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: 'rgba(210, 35, 231, 1)'
                            },
                            {
                              offset: 1,
                              color: 'rgba(76, 143, 243, 0)'
                            }
                          ]),
                          // barBorderRadius:[5, 5, 0, 0]
                        }
                      },

                      data: huozhi
                    },
                    {
                      name: '进口',
                      type: 'bar',
                       barWidth: '30%',
                      itemStyle: {
                        normal: {
                          color: '#47f7f4',
                          // barBorderRadius:[5, 5, 0, 0]
                        },
                      },
                      data: shuie
                    }
                    // {
                    //   name: '单量',
                    //   type: 'line',
                    //   itemStyle: {
                    //     normal: {
                    //       color: '#aedbe9'
                    //     }

                    //   },
                    //   yAxisIndex: 1,
                    //   data: danliang
                    // }
                  ]
                };

                myChart.setOption(option)
                window.addEventListener("resize", function() {
                  myChart.resize()
                })

              } else {
                alert("数据请求错误")
              }
            })
            .catch(function(error) {
              alert(error)
            })

        }
      },


    }
  }
</script>

<style>
  .businessTrend {
    width: 100%;
    height: 100%;

  }
</style>
